<template>
  <div class="simple-example">
    <h3>菜单组件解耦示例</h3>

    <!-- 垂直菜单 -->
    <div class="menu-section">
      <h4>垂直菜单</h4>
      <Menu :menu-data="verticalMenuData" :active-key="activeKey" @menu-select="handleMenuSelect" />
    </div>

    <!-- 水平菜单 -->
    <div class="menu-section">
      <h4>水平菜单</h4>
      <Menu
        :menu-data="horizontalMenuData"
        :active-key="activeKey"
        mode="horizontal"
        @menu-select="handleMenuSelect"
      />
    </div>

    <!-- 折叠菜单 -->
    <div class="menu-section">
      <h4>折叠菜单</h4>
      <div class="controls">
        <button @click="toggleCollapse">
          {{ isCollapsed ? '展开' : '折叠' }}
        </button>
      </div>
      <Menu
        :menu-data="verticalMenuData"
        :active-key="activeKey"
        :collapse="isCollapsed"
        @menu-select="handleMenuSelect"
      />
    </div>

    <!-- 信息显示 -->
    <div class="info-panel">
      <h4>当前状态</h4>
      <p><strong>激活菜单:</strong> {{ activeKey }}</p>
      <p><strong>最后选择:</strong> {{ lastSelected?.title || '无' }}</p>
      <p><strong>菜单折叠:</strong> {{ isCollapsed ? '是' : '否' }}</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Menu, type MenuItem } from '@/components/Menu'
import { ref } from 'vue'

// 菜单状态
const activeKey = ref('/dashboard')
const isCollapsed = ref(false)
const lastSelected = ref<MenuItem | null>(null)

// 垂直菜单数据
const verticalMenuData: MenuItem[] = [
  {
    id: 'dashboard',
    title: '仪表盘',
    icon: 'Dashboard',
    path: '/dashboard'
  },
  {
    id: 'system',
    title: '系统管理',
    icon: 'Setting',
    path: '/system',
    children: [
      {
        id: 'user',
        title: '用户管理',
        icon: 'User',
        path: '/system/user'
      },
      {
        id: 'role',
        title: '角色管理',
        icon: 'UserFilled',
        path: '/system/role'
      },
      {
        id: 'menu',
        title: '菜单管理',
        icon: 'Menu',
        path: '/system/menu'
      }
    ]
  },
  {
    id: 'tools',
    title: '工具',
    icon: 'Tools',
    path: '/tools',
    children: [
      {
        id: 'generator',
        title: '代码生成器',
        icon: 'Code',
        path: '/tools/generator'
      },
      {
        id: 'swagger',
        title: 'API文档',
        icon: 'Document',
        path: '/tools/swagger'
      }
    ]
  }
]

// 水平菜单数据
const horizontalMenuData: MenuItem[] = [
  {
    id: 'home',
    title: '首页',
    icon: 'Home',
    path: '/home'
  },
  {
    id: 'about',
    title: '关于',
    icon: 'Info',
    path: '/about'
  },
  {
    id: 'contact',
    title: '联系',
    icon: 'Phone',
    path: '/contact'
  }
]

// 切换折叠状态
const toggleCollapse = () => {
  isCollapsed.value = !isCollapsed.value
}

// 处理菜单选择
const handleMenuSelect = (item: MenuItem, key: string) => {
  console.log('选中菜单项:', item, '键值:', key)

  // 更新状态
  activeKey.value = key
  lastSelected.value = item

  // 这里可以添加自定义逻辑，比如路由跳转
  // if (item.path) {
  //   router.push(item.path)
  // }
}
</script>

<style scoped>
.simple-example {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.menu-section {
  margin-bottom: 30px;
  padding: 20px;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  background-color: #fafafa;
}

.menu-section h4 {
  margin: 0 0 15px 0;
  color: #333;
  font-size: 16px;
}

.controls {
  margin-bottom: 15px;
}

.controls button {
  padding: 8px 16px;
  background-color: #1890ff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.controls button:hover {
  background-color: #40a9ff;
}

.info-panel {
  margin-top: 30px;
  padding: 20px;
  background-color: #f6ffed;
  border: 1px solid #b7eb8f;
  border-radius: 8px;
}

.info-panel h4 {
  margin: 0 0 15px 0;
  color: #52c41a;
}

.info-panel p {
  margin: 8px 0;
  color: #666;
}

.info-panel strong {
  color: #333;
}
</style>
